<template>
	<view>
		<block v-if="diy==1">
			<view style="height: 110rpx;"></view>
			<view class="tabbar">
				<view class="action">
					<navigator url="/pages/index/index" hover-class="none" open-type="reLaunch">
						<view class="bar-icon">
							<u-icon name="home" size="20" label="首页" labelPos="bottom" labelSize="12"
								:labelColor="route=='/pages/index/index'?color_value:'#767a82'"
								:color="route=='/pages/index/index'?color_value:'#767a82'"></u-icon>
						</view>
					</navigator>
				</view>

<!-- 				<view class="action">
					<navigator url="/pages/create/create" hover-class="none" open-type="reLaunch">
						<view class="bar-icon">
							<u-icon name="plus-circle-fill" size="20" label="发起投票" labelPos="bottom" labelSize="12"
								:labelColor="route=='/pages/create/create'?color_value:'#767a82'"
								:color="route=='/pages/create/create'?color_value:'#767a82'"></u-icon>
						</view>
					</navigator>
				</view> -->

				<view class="action">
					<navigator url="/pages/user/user" hover-class="none" open-type="reLaunch">
						<view class="bar-icon">
							<u-icon name="account" size="20" label="我的" labelPos="bottom" labelSize="12"
								:labelColor="route=='/pages/user/user'?color_value:'#767a82'"
								:color="route=='/pages/user/user'?color_value:'#767a82'"></u-icon>
						</view>
					</navigator>
				</view>
			</view>
		</block>


		<block v-if="diy==2">
			<view style="height: 100rpx;"></view>
			<view class="disFix">
				<block v-for="(item, index) in tabbar" :key="index">
					<view @click="link(item.link)">
						<u-icon :name="clickImg(item)" size="30" :label="item.name" labelPos="bottom" labelSize="12"
							:labelColor="clickClass(item.link.url)"
							:color="clickClass(item.link.url)"></u-icon>
					</view>
				</block>
			</view>
		</block>



	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl:'common/cdnurl',
				color:'common/color',
				color_value:'common/color_value',
			})
		},
		name: 'tabbar',
		props: {
			
		},
		data() {
			return {
				tabbar: null,
				route: '',
				diy: 0,
			};
		},

		mounted() {
			var pages = getCurrentPages();
			var currentPage = pages[pages.length - 1];
			const url = currentPage.route;
			const options = currentPage.options;
			let urlWithArgs = `/${url}?`;
			for (let key in options) {
				const value = options[key];
				urlWithArgs += `${key}=${value}&`;
			}
			this.route = urlWithArgs.substring(0, urlWithArgs.length - 1);

			this.http('common/tabbar', '', 'get').then(res => {
				if(res.data.length > 0){
					this.tabbar = res.data;
					this.diy = 2;
				}else{
					this.diy = 1;
				}
			});
		},
		methods: {
			// 选中样式
			clickClass(url) {
				return this.route == url ? this.color_value : '#767a82'
			},
			clickImg(item){
				return this.route == item.link.url ? item.img_active : item.img
			},
			link(link) {
				if (!link) {
					return true;
				}
				var open_type = link.open_type;
				var url = link.url;
				var params = link.params;
				if (open_type == 'wxapp') {
					uni.navigateToMiniProgram({
						appId: params.appid,
						path: params.path,
					});
				} else if (open_type == 'tel') {
					uni.makePhoneCall({
						phoneNumber: params.tel
					});
				} else if (open_type == 'web') {
					uni.setStorageSync('webview_url', params.url)
					uni.navigateTo({
						url: '/pages/webview/webview',
					});
				} else if (open_type == 'path') {
					uni.navigateTo({
						url: params.url,
					});
				} else {
					var param = '';
					if (params) {
						param = '?';
						for (var i in params) {
							param = param + i + '=' + params[i];
						}
					}
					uni.reLaunch({
						url: url + param
					});
				}
			},
		}
	};
</script>

<style>
	.disFix {
		display: flex;
		justify-content: space-between;
		z-index: 999;
		position: fixed;
		height: 100rpx;
		background: #ffffff;
		bottom: 0;
		width: 100%;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.disFix>view{
		flex: 1;
		display: inline-block;
		text-align: center;
		padding-top: 5px;
	}

	/* 底部tabbar 毛玻璃风格 start*/
	.tabbar {
		width: 690rpx;
		position: fixed;
		left: 0px;
		right: 0px;
		bottom: 40rpx;
		z-index: 999;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: 110rpx;
		border-radius: 100rpx;
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
		text-align: center;
	}

</style>
